<template>
  <div class="home">
    <a-carousel autoplay>
      <div
        class="banner-item"
        v-for="(item, idx) in bannerList"
        :key="idx"
        @click="bannerGoTo(item)"
      ></div>
    </a-carousel>
    <div class="content layout-main">
      <!-- <div class="content-item">
        <div class="head flex-between flex-align-c">
          <div class="title">
            <span class="text">自选</span>
            <span class="attention-category">
              <span>关注的报价：</span>
            </span>
          </div>
          <c-button type="link">
            查看全部
          </c-button>
        </div>
        <div class="content"></div>
        <a-divider><c-button type="link">更多请前往自选</c-button></a-divider>
      </div> -->
      <div class="content-item">
        <div class="head flex-between flex-align-c">
          <div class="title">
            <span class="text">现货商城</span>
            <span class="hot-category">
              <template v-for="tag in hotClassifyTags">
                <a-checkable-tag
                  :key="tag.value"
                  :checked="selectedHotTags.indexOf(tag.id) > -1"
                  @change="checked => hotTagsChange(tag, checked)"
                >
                  <span class="cursor-pointer no-select"
                    >{{ tag.categoryName }}
                  </span>
                </a-checkable-tag>
              </template>
            </span>
          </div>
          <c-button type="link" @click="checkAll('spotmall')">
            查看全部
          </c-button>
        </div>
        <div class="content">
          <Spotmall ref="spotmall" />
        </div>
        <a-divider
          ><c-button type="link" @click="checkAll('spotmall')"
            >更多请前往现货商城</c-button
          ></a-divider
        >
      </div>
      <!-- <div class="content-item">
        <div class="head flex-between flex-align-c">
          <div class="title">
            <span class="text">最新资讯</span>
            <span class="news">
              <template v-for="tag in newsTags">
                <a-checkable-tag
                  :key="tag.value"
                  :checked="selectedNewsTags.indexOf(tag.value) > -1"
                  @change="checked => newsTagsChange(tag, checked)"
                >
                  <span class="cursor-pointer no-select">{{ tag.name }} </span>
                </a-checkable-tag>
              </template>
            </span>
          </div>
          <c-button type="link">
            查看全部
          </c-button>
        </div>
        <div class="content"></div>
        <a-divider><c-button type="link">查看更多资讯</c-button></a-divider>
      </div> -->
    </div>
  </div>
</template>

<script>
import Spotmall from "@/page/spotmall";
import { mapState } from "vuex";

export default {
  components: {
    Spotmall
  },
  data() {
    return {
      bannerList: [
        {
          title: "商城介绍",
          self: true,
          hrefUrl: "/about/mall"
        }
      ],
      selectedHotTags: [],
      // selectedNewsTags: ["0"],
      // newsTags: [
      //   {
      //     value: "0",
      //     name: "有色"
      //   },
      //   {
      //     value: "1",
      //     name: "黑色"
      //   },
      //   {
      //     value: "2",
      //     name: "化工"
      //   },
      //   {
      //     value: "3",
      //     name: "农产品"
      //   },
      //   {
      //     value: "4",
      //     name: "其他"
      //   }
      // ],
      preUrl: window.location.protocol + "//" + window.location.host,
      spotMallcategoryId: undefined, // 现货商城筛选品种
      spotmallLoading: false,
      spotmallList: []
    };
  },
  computed: {
    ...mapState(["resource"]),
    // 热门品种
    hotClassifyTags() {
      let categoryNames = [
        "铜线坯",
        "热轧卷板",
        "螺纹钢",
        "盘螺",
        "铝锭",
        "锌锭",
        "电解铜"
      ];
      let res = [];
      categoryNames.forEach(item => {
        let arr = this.resource.categoryList.filter(
          i => i.categoryName === item
        );
        res = res.concat(arr);
      });
      return res;
    }
  },
  methods: {
    hotTagsChange(tag, checked) {
      let params;
      if (checked) {
        this.selectedHotTags = [tag.id];
        params = {
          class: [0],
          hotcategory: this.selectedHotTags
        };
      } else {
        this.selectedHotTags = [];
        params = {
          class: [0],
          hotcategory: []
        };
      }
      this.$refs.spotmall.filterChange(params);
    },
    newsTagsChange(tag) {
      this.selectedNewsTags = [tag.value];
    },
    // 轮播跳转
    bannerGoTo(data) {
      if (data.self) {
        // 当前窗口跳转
        window.location.href = this.preUrl + data.hrefUrl;
      } else {
        // 新窗口跳转
        window.open(this.preUrl + data.hrefUrl);
      }
    },
    // 查看所有
    checkAll(name) {
      this.$router.push({ name: name });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .ant-carousel .banner-item {
  height: 400px;
  background: #364d79;
  overflow: hidden;
  background: url("/img/banner.jpg") 50% center / cover no-repeat;
}
.content {
  margin-top: 20px;
  .content-item {
    margin-bottom: 20px;
    .head {
      margin-bottom: 20px;
      .title {
        .text {
          font-size: 16px;
          font-weight: bold;
          margin-right: 15px;
        }
        .hot-category,
        .news {
          .ant-tag {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
